<form nz-form class="upload-container" [formGroup]="formInstance">

  <div class="form-item" nz-form-item nz-row>
    <div nz-form-label nz-col nzSpan="4">
      <label nz-form-item-required>数据名称</label>
    </div>
    <div nz-form-control nz-col nzSpan="18">
      <nz-input nzSize="large" formControlName="layerName" nzPlaceHolder="输入图层名称"></nz-input>
    </div>
  </div>

  <div nz-row>
    <div class="form-item" nz-form-item nz-col [nzSpan]="8" nz-row>
      <div nz-form-label nz-col nzSpan="12">
        <label>立即显示</label>
      </div>
      <div nz-form-control nz-col nzSpan="12">
        <nz-switch formControlName="visible"></nz-switch>
      </div>
    </div>
    <div class="form-item" nz-form-item nz-col [nzSpan]="14" nz-row>
      <div nz-form-label nz-col nzSpan="8">
        <label>缩放到数据范围</label>
      </div>
      <div nz-form-control nz-col nzSpan="16">
        <nz-switch formControlName="zoomTo"></nz-switch>
      </div>
    </div>
  </div>

  <div ngx-ol-upload class="upload-drag-area" 
  *ngIf="files.length === 0"
  [accept]="accepts"
  [multiple]="false"
  (fileChange)="onFileChange($event)">
    <p class="upload-drag-icon">
      <i class="anticon anticon-inbox"></i>
    </p>
    <p class="upload-text">单击或拖动文件到此区域进行上传</p>
    <p class="upload-hint">支持拖拽或者选择单个文件。允许的文件格式包括：GPX / GeoJSON / IGC / KML / TopoJSON / Shapefile。<br>目前只支持坐标系为WGS84的文件。</p>
  </div>
  <ul class="file-list" *ngIf="files.length !== 0">
    <li ngx-ol-file class="file-item" *ngFor="let file of files" [file]="file" (onRemove)="onRemoveFile($event)"></li>
  </ul>

  <div class="alert-error" *ngIf="alertErrorDes">
    <i class="anticon anticon-close-circle-o alert-error-icon"></i>
    <span class="alert-error-description">{{alertErrorDes}}</span>
    <a class="alert-error-close" (click)="closeAlertError($event)">关闭</a>
  </div>

</form>

<div class="upload-footer">
  <button nz-button (click)="onClickOkBtn($event)" nzType="primary" [nzLoading]="loading" [disabled]="submitDisabled || !formInstance.valid">确 定</button>
  <button nz-button (click)="onClickResetBtn($event)" nzType="default" [disabled]="loading">重 置</button>
  <button nz-button (click)="onClickCancelBtn($event)" nzType="default" [disabled]="loading">取 消</button>
</div>
